<template>
    <el-dialog :title="form.id? $t('common.editBtn'):$t('common.addBtn')" :close-on-click-modal="false" width="600"
        draggable v-model="visible">
        <el-form :model="form" ref="formRef" label-width="100px" :rules="rules" v-loading="loading">
            <el-form-item :label="$t('aigcEmbedStore.provider')" prop="provider">
                <el-select v-model="form.provider" :placeholder="$t('aigcEmbedStore.inputProviderTip')" clearable>
                    <el-option :key="index" :label="item.label" :value="item.value" v-for="(item, index) in llm_embedStore_provider"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('aigcEmbedStore.name')" prop="name">
                <el-input v-model="form.name" :placeholder="$t('aigcEmbedStore.inputNameTip')" clearable ></el-input>
            </el-form-item>

             <el-form-item :label="$t('aigcEmbedStore.host')" prop="host">
                <el-input v-model="form.host" :placeholder="t('aigcEmbedStore.inputHostTip')" clearable />
            </el-form-item>

             <el-form-item :label="$t('aigcEmbedStore.port')" prop="port">
                <el-input type="number" v-model="form.port" :placeholder="t('aigcEmbedStore.inputPortTip')" clearable />
             </el-form-item>
             <el-form-item :label="$t('aigcEmbedStore.userName')" prop="userName" v-if="form.provider==='Redis'||form.provider==='PgVector'">
                <el-input v-model="form.userName" :placeholder="t('aigcEmbedStore.inputUserNameTip')" clearable />
            </el-form-item>
            <el-form-item :label="$t('aigcEmbedStore.password')" prop="password" v-if="form.provider==='Redis'||form.provider==='PgVector'">
                <el-input type="password" v-model="form.password" :placeholder="t('aigcEmbedStore.inputPasswordTip')" clearable />
            </el-form-item>

            <el-form-item :label="$t('aigcEmbedStore.databaseName')" prop="databaseName">
                <el-input v-model="form.databaseName" :placeholder="t('aigcEmbedStore.inputDatabaseNameTip')" clearable />
            </el-form-item>
            <el-form-item :label="$t('aigcEmbedStore.tableName')" prop="tableName" v-if="form.provider==='Milvus'||form.provider==='PgVector'">
                <el-input v-model="form.tableName" :placeholder="t('aigcEmbedStore.inputTableNameTip')" clearable />
            </el-form-item>
            <el-form-item :label="$t('aigcEmbedStore.dimension')" prop="dimension" v-if="form.provider!=='ElasticSearch'">
                <el-input type="number" v-model="form.dimension" :placeholder="t('aigcEmbedStore.inputDimensionTip')" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">{{$t('common.cancelButtonText')}}</el-button>
            <el-button @click="onSubmit" type="primary" :disabled="loading">{{$t('common.confirmButtonText')}}</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="aigcEmbedStoreDialog">
import {rule} from '/@/utils/validate';
import {useMessage} from '/@/hooks/message';
import {addObj,putObj,getObj} from '/@/api/aigc/embedStore';
import {useI18n} from 'vue-i18n';
import {useDict} from '/@/hooks/dict';

    const {llm_embedStore_provider} = useDict('llm_embedStore_provider');
    const {t} = useI18n();
    // 定义变量内容
    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);
    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);
    // 提交表单数据
    const form = reactive({
        id:'',
        name:'',
        provider:'',
        host:'',
        port:'',
        userName:'',
        password:'',
        databaseName:'',
        tableName:'',
        dimension:'',
    });
    //规则校验
    const rules = reactive({
        name:[
            {required:true,message:'名称不能为空',trigger:'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'},
            {validator:rule.validatorNameCn,trigger:'blur'}
        ],
        provider:[
            {required:true,message:'供应商不能为空',trigger:'blur'}
        ],
        host:[
         {required:true,message:'地址不能为空',trigger:'blur'}
         ],
        port:[
           {required:true,message:'端口不能为空',trigger:'blur'}
           ],
        userName:[
            {required:true,message:'用户名不能为空',trigger:'blur'}
        ],
        password:[
            {required:true,message:'密码不能为空',trigger:'blur'}
        ],
        databaseName:[
            {required:true,message:'数据库名不能为空',trigger:'blur'}
        ],
        tableName:[
            {required:true,message:'数据表名不能为空',trigger:'blur'}
        ],
        dimension:[
            {required:true,message:'维度数不能为空',trigger:'blur'}
        ]
    });
    //监听供应商
    watch(()=>form.provider,(val)=>{
        if(val==='Redis'){
            rules.password=[];
            rules.userName=[];
        }else{
            rules.password=[
                {required:true,message:'密码不能为空',trigger:'blur'}
            ];
            rules.userName=[
                {required:true,message:'用户名不能为空',trigger:'blur'}
            ];
        }
    });

    //打开对话框
    const openDialog= (id?:string) => {
        visible.value = true;
        form.id='';
        nextTick(()=>{
          formRef.value.resetFields();
        });

        if(id){
           form.id=id;
           getData(id);
        }
    };
    //获取数据详情
    const getData = (id:string) => {
        getObj(id).then((res:any)=>{
            Object.assign(form,res.data);
        });
    };

    //提交表单数据
    const onSubmit = async () => {
        const valid = await formRef.value.validate();
        if(!valid){
            return false;
        }
        try{
            loading.value=true;
            form.id?await putObj(form):await addObj(form);
            useMessage().success(form.id?t('common.editSuccessText'):t('common.addSuccessText'));
            visible.value = false;
            emit('refresh');
        }catch (e) {
            useMessage().error(e.msg);
        }finally {
            loading.value=false;
        }
    };
    //对外暴露方法
    defineExpose({
        openDialog,
    });
</script>